<template>
	<view class="content">
		<!-- 搜索框组件 -->
		<searchInput :config="searchconfig"></searchInput>
		<view class="all_services_box">
			<view class="service_category_box">
				<view class="category_item" :class="{active:isActive=='全部'}" @click="isActive='全部'">全部</view>
				<view class="category_item" v-for="item in serviceTypeData" :class="{active:isActive==item}"
					@click="isActive=item">{{item}}</view>
			</view>
			<view class="service_item_box">
				<view class="service_item_content">
					<view class="content_item" v-for="item in serviceTypeData" v-show="isActive=='全部'||isActive==item">
						<view class="service_type_name" v-show="search==''">{{item}}</view>
						<view class="service_item" @click="go_link(service_item.link)"
							v-for="service_item in serviceData"
							v-show="service_item.serviceType==item&&service_item.serviceName.indexOf(search)!=-1">
							<image mode="widthFix" :src="host+service_item.imgUrl"></image>
							<view>{{service_item.serviceName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/request.js";
	export default {
		data() {
			return {
				host: uni.getStorageSync("BASE_URL"),
				searchconfig: {
					searchValue: ""
				},
				search: "",
				serviceData: [],
				serviceTypeData: [],
				isActive: "全部"
			}
		},
		created() {
			let that = this;
			http({
				url: "/prod-api/api/service/list",
			}).then((res) => {
				that.serviceData = res.data.rows;
				for (let item in that.serviceData) {
					if (that.serviceTypeData.indexOf(that.serviceData[item].serviceType) == -1) {
						that.serviceTypeData.push(that.serviceData[item].serviceType);
					}
				}
			})

		},
		methods: {
			go_link(url) {
				uni.navigateTo({
					url: "/pages/" + url
				})
			}
		},
		watch: {
			searchconfig: {
				handler: function(newValue, oldValue) {
					this.search = newValue.searchValue
					console.log(newValue.searchValue)
				},
				deep: true
			}
		}
	}
</script>

<style>
	html,
	body {
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.Search_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 3rem;
		line-height: 3rem;
		padding: 0 .5rem 0 2rem;
		box-sizing: border-box;
		border-radius: 1rem;
		background-color: #d9d9d9;
	}

	.all_services_box {
		display: flex;
		height: 100%;
	}

	.service_category_box {
		display: flex;
		flex-direction: column;
		flex: 2;
		align-items: center;
		justify-content: flex-start;
	}

	.category_item {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx 0;
	}

	.service_item_box {
		display: flex;
		flex: 8;
	}

	.service_category_box .active {
		color: red;
		background-color: aliceblue;
	}

	.service_item_content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.content_item {
		width: calc(100% - .5rem * 2);
		display: flex;
		flex-wrap: wrap;
		padding: 0 .5rem .5rem .5rem;
	}
	.service_type_name {
		display: flex;
		min-width:  calc(100% - .5rem * 2);
		font-size: 1.1rem;
		padding: .5rem;
		color: #7f8c8d;
		text-align: center;
		background-color: aliceblue;
	}

	.service_item {
		display: flex;
		width: 25%;
		min-width: 25%;
		flex-direction: column;
		box-sizing: border-box;
		padding: 10rpx;
		justify-content: space-between;
		align-items: center;
		font-size: .8rem;
		margin-right: -1px;
		margin-bottom: -1px;
	}

	.service_item image {
		width: 80%;
		max-width: 80rpx;
		max-height: 80rpx;
		border-radius: 100%;
		background-color: inherit;
	}
</style>
